---
// 飞利猫专用Layout组件 - 不包含默认Header导航
import Footer from '../components/layout/Footer.astro';
import BackToTop from '../components/layout/BackToTop.astro';
import MadeWithButton from '../components/layout/MadeWithButton.astro';
import BottomBar from '../components/layout/BottomBar.astro';

interface Props {
  description: string;
  title: string;
  image?: string;
  keywords?: string;
}

const { description, title, image, keywords } = Astro.props;
---

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="generator" content={Astro.generator} />
    <meta name="description" content={description} />
    <meta name="keywords" content={keywords} />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content={Astro.url} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image || "/assets/logo/flmlogo.png"} />
    <meta property="og:site_name" content="飞利猫随身WiFi官网" />
    <meta property="og:locale" content="zh_CN" />
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content={Astro.url} />
    <meta property="twitter:title" content={title} />
    <meta property="twitter:description" content={description} />
    <meta property="twitter:image" content={image || "/assets/logo/flmlogo.png"} />
    
    <!-- 其他SEO相关meta标签 -->
    <meta name="robots" content="index, follow" />
    <meta name="author" content="飞利猫官网" />
    <meta name="theme-color" content="#3b82f6" />
    <link rel="canonical" href={Astro.url} />
    
    <title>{title}</title>
    <!-- 本地 Material Icons -->
    <link href="/assets/icons/material-icons.css" rel="stylesheet">
    <!-- 本地 Inter 字体 -->
    <link href="/assets/fonts/inter.css" rel="stylesheet">
    <!-- Alpine.js CDN - 用于交互式组件，使用 unpkg 作为备用 CDN -->
    <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script>
  </head>
  <body>
    <!-- 飞利猫专用Layout：不包含默认Header，由页面自己控制Header显示 -->
    <main>
      <slot />
    </main>
    <!-- 保留Footer和其他必要组件 -->
    <Footer />
    <BackToTop />
    <MadeWithButton />
    <BottomBar />

    <!-- 百度统计代码 -->
    <script is:inline>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?85eff938bcb3644c17df50abcdb88a50";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
    </script>

    <style is:global>
      /* 使用本地Inter字体 */
      body {
        font-family: "Inter", sans-serif;
      }
      .sticky-header {
        @apply fixed z-[9999] bg-white/80 dark:bg-dark/80 transition;
        backdrop-filter: blur(5px);
        box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
      }

      .sticky-header .navbar-logo {
        @apply py-2;
      }

      .sticky-header #navbarToggler span {
        @apply bg-dark dark:bg-white;
      }

      .sticky-header #navbarCollapse li > a {
        @apply text-dark dark:text-white hover:text-primary dark:hover:text-primary hover:opacity-100;
      }
      #navbarCollapse li .ud-menu-scroll.active {
        @apply opacity-70;
      }
      .sticky-header #navbarCollapse li .ud-menu-scroll.active {
        @apply text-primary opacity-100;
      }
      .sticky-header .loginBtn {
        @apply text-dark dark:text-white hover:text-primary dark:hover:text-primary hover:opacity-100;
      }

      .sticky-header .signUpBtn {
        @apply bg-primary text-white hover:bg-blue-dark hover:text-white;
      }

      .sticky-header #themeSwitcher span {
        @apply text-dark dark:text-white;
      }

      .navbarTogglerActive > span:nth-child(1) {
        @apply top-[7px] rotate-45 transform;
      }
      .navbarTogglerActive > span:nth-child(2) {
        @apply opacity-0;
      }
      .navbarTogglerActive > span:nth-child(3) {
        @apply top-[-8px] rotate-[135deg];
      }

      .common-carousel .swiper-button-next:after,
      .common-carousel .swiper-button-prev:after {
        @apply hidden;
      }

      .common-carousel .swiper-button-next,
      .common-carousel .swiper-button-prev {
        @apply !static h-12 w-12 rounded-lg bg-white dark:bg-dark shadow-testimonial-btn text-dark dark:text-white m-0 ease-out duration-200 hover:bg-primary hover:text-white hover:shadow-none;
      }

      .common-carousel .swiper-button-next svg,
      .common-carousel .swiper-button-prev svg {
        @apply w-auto h-auto;
      }

    </style>
    <script>
      import "../scripts/stickymenu.js";
      import "../scripts/dropdown.js";
      import "../scripts/darkMode.js";
      import "../scripts/scrolltop.js";
      import "../scripts/scrollmenu.js";
      import "../scripts/testimonial.js";
    </script>
  </body>
</html>